<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style>
		body {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background: #000;
		}

		*,
		*::before,
		*::after {
			box-sizing: border-box;
		}

		@keyframes rotate {
			100% {
				transform: rotate(1turn);
			}
		}

		.conic {
			position: relative;
			z-index: 0;
			width: 400px;
			height: 300px;
			margin: 20px;
			border-radius: 10px;
			overflow: hidden;
			padding: 2rem;


		}

		.conic::before {
			content: '';
			position: absolute;
			z-index: -2;
			left: -50%;
			top: -50%;
			width: 200%;
			height: 200%;
			background-color: #1a232a;
			background-repeat: no-repeat;
			background-position: 0 0;
			background-image: conic-gradient(transparent, rgba(168, 239, 255, 1), transparent 30%);
			animation: rotate 4s linear infinite;
		}

		.conic::after {
			content: '';
			position: absolute;
			z-index: -1;
			left: 6px;
			top: 6px;
			width: calc(100% - 12px);
			height: calc(100% - 12px);
			background: #000;
			border-radius: 5px;
		}

		.conic-demo::after {
			animation: opacityChange 5s infinite linear;
		}

		@keyframes opacityChange {
			50% {
				opacity: .5;
			}

			100% {
				opacity: 1;
			}
		}
	</style>
	<body>
		<div class="conic"></div>
		<div class="conic conic-demo"></div>
	</body>
</html>
